<template>
    <div class="shopContain">

        <router-link tag="div" :to="'/goodsInfo/'+item.productId" class="shop_item" v-for="(item,index) in goodsList" :key="item.productId">
                <img :src="item.smallImage"  alt="">
                <h1 class="title">{{item.productName}}</h1>
                <div class="info">
                    <p class="price">
                    <span class="price_spann">￥{{item.vipshopPrice}}</span>
                    <span class="old_spann">￥{{item.marketPrice}}</span>
                    </p>
                    <p class="sell">
                    <span>热卖中</span>
                    <span>剩{{index}}件</span>
                    </p>
                </div>

        </router-link>
    </div>




</template>


<script>
import {Toast} from 'mint-ui';
export default {
    data(){
        return {
            goodsList:[],
        }
    },
    created() {
        this.initGoodsList()
    },
    methods:{
        initGoodsList(){
            this.$http.get("shop/goodsList/get").then(res=>{
                if(!res.ok){
                    Toast("获取商品列表失败")
                    return 
                }
                let data = res.body.data
                this.goodsList = data;
            });
        }
    }
}
</script>

<style scoped> 

    .shopContain{
         display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        padding: 5px;
    }

    .shop_item{
        width: 49%;
        border: 1px solid #ccc;
        box-shadow: 0 0 8px #ccc;
        margin: 4px 0;
        padding: 2px;
        min-height: 293px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .shop_item img{
        width: 100%
    }
    .shop_item h1{
         font-size: 14px;
         line-height: 22px
    }

    .shop_item .sell{
        display: flex;
        justify-content:space-between;
         font-size: 14px;
    }


    .shop_item .info {
      background-color: #eee;
    }

     .shop_item .info p{
        margin: 0;
        padding: 5px;
     }  

    .shop_item .info .price_spann{
        font-size: 15px;
        color: red;
    }

     .shop_item .info .old_spann{
        font-size: 12px;
        text-decoration:line-through
    }



</style>

